<script setup>
    import { computed, reactive, ref } from 'vue';

    const count = ref(1)
    // 计算属性
    const doubleCount = computed(() => count.value * 2)

    const list = reactive([1,2,3,4,5,6,7,8])
    // 计算属性
    const filterList = computed(() => list.filter(item => item > 2))
</script>

<template>
    <div style="border: solid 1px red;">
        <h2>count初始值：{{ count }}</h2>
        <h2>count计算属性值：{{ doubleCount }}</h2>
    </div>
    <hr/>
    <div style="border: dashed 2px blue;">
        <h2>list初始值：{{ list }}</h2>
        <h2>list计算属性的值：{{ filterList }}</h2>
    </div>
</template>